<template>
  <div class="home">
    <el-row :gutter="10">
      <el-col :span="16">
        <div class="contentMain">
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="butMain">
                <el-button type="primary" @click="multipleAllChange">全选</el-button>
                <el-button type="warning" @click="multipleReverseChange">反选</el-button>
                <el-button @click="multipleResetChange">重置</el-button>
              </div>
            </el-col>
            <el-col :span="8" v-for="(item, index) in dataList">
              <div class="listMain" @click="multipleChange(item.id)">
                <div class="listTitle">{{ item.title }}</div>
                <div class="listText">编码：{{ item.id }}</div>
                <div class="listText">时间：{{ item.time }}</div>
                <div class="multipleMain" :class="{multipleMainR:multipleIndex.includes(item.id)}">
                  <el-icon><Check /></el-icon>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="contentMain">
          {{ multipleIndex }}
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Check } from '@element-plus/icons'
export default {
  name: 'Home',
  components: {
    Check
  },
  data () {
    return {
      multipleIndex: [],
      dataList: [
        {id: '10022114433110001', title: '这是标题1', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110002', title: '这是标题2', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110003', title: '这是标题3', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110004', title: '这是标题4', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110005', title: '这是标题5', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110006', title: '这是标题6', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110007', title: '这是标题7', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110008', title: '这是标题8', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110009', title: '这是标题9', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110010', title: '这是标题10', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110011', title: '这是标题11', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110012', title: '这是标题12', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110013', title: '这是标题13', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110014', title: '这是标题14', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110015', title: '这是标题15', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110016', title: '这是标题16', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110017', title: '这是标题17', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110018', title: '这是标题18', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110019', title: '这是标题19', time: '2021-12-10 11:18 33:22'},
        {id: '10022114433110020', title: '这是标题20', time: '2021-12-10 11:18 33:22'},
      ]
    };
  },
  methods: {
    // 单选
    multipleRadioChange (val) {
      this.multipleIndex = val;
      console.log("单选")
      console.log(this.multipleIndex)
    },

    // 多选
    multipleChange(val) {
      if (this.multipleIndex.includes(val)) {
        this.multipleIndex = this.multipleIndex.filter(
          function (ele){
            return ele != val;
          }
        );
      }else {
        this.multipleIndex.push(val);
      };
      console.log("多选")
      console.log(this.multipleIndex)
    },

    // 全选
    multipleAllChange () {
      let idAll = [];
      let dataList = this.dataList;
      let i = 0;
      for (i; dataList.length > i; i++) {
        idAll.push(dataList[i].id);
      };
      this.multipleIndex = idAll;
      console.log("全选")
      console.log(this.multipleIndex)
    },

    // 反选
    multipleReverseChange () {
      let dataList = this.dataList;
      let i = 0;
      for (i; dataList.length > i; i++) {
        if (this.multipleIndex.includes(dataList[i].id)) {
          this.multipleIndex = this.multipleIndex.filter(
            function (ele) {
              return ele != dataList[i].id;
            }
          )
        }else {
          this.multipleIndex.push(dataList[i].id);
        }
      };
      console.log("反选")
      console.log(this.dataList)
    },

    // 重置
    multipleResetChange () {
      this.multipleIndex = [];
      console.log("已重置")
    },
  },
}
</script>
